<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" [innerText]="service.customName || service.serviceName"></h5>
    <button
      type="button"
      class="btn-close"
      data-bs-dismiss="modal"
      [attr.aria-label]="'form.button_close' | translate"
      (click)="dismissModal()"
    ></button>
  </div>
  <div class="modal-body text-center px-5">
    <div
      class="btn-group-vertical d-flex justify-content-center mb-0 p-0"
      role="group"
      [attr.aria-label]="'accessories.control.mode_control' | translate"
    >
      <button type="button" class="btn mb-0 mx-0 p-3 btn-control" (click)="setTargetMode(false, $event)">
        <div class="float-start primary-text">
          <i class="fas fa-xl" [ngClass]="{ 'fa-check-circle': !targetMode, 'fa-blank': targetMode }"></i>
        </div>
        {{ 'accessories.control.off' | translate }}
        <div class="float-end"><i class="fas fa-xl fa-blank"></i></div>
      </button>
      <button type="button" class="btn mb-0 mx-0 p-3 btn-control" (click)="setTargetMode(true, $event)">
        <div class="float-start primary-text">
          <i class="fas fa-xl" [ngClass]="{ 'fa-check-circle': targetMode, 'fa-blank': !targetMode }"></i>
        </div>
        {{ 'accessories.control.on' | translate }}
        <div class="float-end"><i class="fas fa-xl fa-blank"></i></div>
      </button>
      @if (hasAdaptiveLighting) {
      <div></div>
      }
    </div>
    @if (hasAdaptiveLighting) {
    <div class="d-flex justify-content-center mb-0 p-0 mt-0 grey-outline">
      <div class="mb-0 mx-0 p-3 btn-read w-100 no-round-top">
        <div class="float-start primary-text">
          <i
            class="fas fa-xl fa-sun"
            [ngClass]="{ 'off-text': !isAdaptiveLightingEnabled, 'on-text': isAdaptiveLightingEnabled }"
          ></i>
        </div>
        {{ 'accessories.control.adaptive_lighting' | translate }}: {{ isAdaptiveLightingEnabled ? 'ON' : 'OFF' }}
        <div class="float-end"><i class="fas fa-xl fa-blank"></i></div>
      </div>
    </div>
    } @if (targetBrightness) {
    <h6 class="mt-4">{{ 'accessories.control.brightness' | translate }}: {{ targetBrightness.value }}%</h6>
    <nouislider
      [min]="targetBrightness.min"
      [max]="targetBrightness.max"
      [step]="targetBrightness.step"
      [(ngModel)]="targetBrightness.value"
      (ngModelChange)="onBrightnessStateChange()"
    />
    } @if (targetHue) {
    <h6 class="mt-4">{{ 'accessories.control.hue' | translate }}: {{ targetHue.value }}&deg;</h6>
    <nouislider
      [min]="0"
      [max]="360"
      [step]="1"
      [(ngModel)]="targetHue.value"
      (ngModelChange)="onHueStateChange()"
      [ngClass]="{ 'mb-1': isAdaptiveLightingEnabled, '': !isAdaptiveLightingEnabled }"
    />
    @if (isAdaptiveLightingEnabled) {
    <div class="d-flex text-center mt-0 mb-1">
      <span class="grey-text small">{{ 'accessories.control.adaptive_lighting_note' | translate }}</span>
    </div>
    } } @if (targetSaturation) {
    <h6 class="mt-4">{{ 'accessories.control.saturation' | translate }}: {{ targetSaturation.value }}%</h6>
    <nouislider
      [min]="0"
      [max]="100"
      [step]="1"
      [(ngModel)]="targetSaturation.value"
      (ngModelChange)="onSaturationStateChange()"
      [ngClass]="{ 'mb-1': isAdaptiveLightingEnabled, '': !isAdaptiveLightingEnabled }"
    />
    @if (isAdaptiveLightingEnabled) {
    <div class="d-flex text-center mt-0 mb-1">
      <span class="grey-text small">{{ 'accessories.control.adaptive_lighting_note' | translate }}</span>
    </div>
    } } @if (targetColorTemperature) {
    <h6 class="mt-4">
      {{ 'accessories.control.color_temperature' | translate }}: {{ targetColorTemperature.mired | convertMired }}
    </h6>
    <nouislider
      [min]="targetColorTemperature.min"
      [max]="targetColorTemperature.max"
      [step]="targetColorTemperature.step"
      [(ngModel)]="targetColorTemperature.value"
      (ngModelChange)="onColorTemperatureStateChange()"
      [ngClass]="{ 'mb-1': isAdaptiveLightingEnabled, '': !isAdaptiveLightingEnabled }"
    />
    @if (isAdaptiveLightingEnabled) {
    <div class="d-flex text-center mt-0 mb-1">
      <span class="grey-text small">{{ 'accessories.control.adaptive_lighting_note' | translate }}</span>
    </div>
    } }
  </div>
  <div class="modal-footer"></div>
</div>
